<template>
  <div class="all">
    <div class="main">
      <!-- 头部 -->
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="标签名称">
          <el-input v-model="form.tags" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="城市" >
          <el-select v-model="form.province" placeholder="请选择" @change="selectCity()">
            <el-option v-for="item in province" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地区">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option v-for="item in city" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业简称">
          <el-input v-model="form.shortName"></el-input>
        </el-form-item>
      </el-form>
      <!-- 第二行 -->
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="状态">
          <el-select v-model="form.state" placeholder="请选择">
            <el-option label="启用" value="true"></el-option>
            <el-option label="禁用" value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="clearselect">清除</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" class="el-icon-edit" @click="addUser"
            >新增用户</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 分隔线 -->
      <div class="separate">
        <p><span class="el-icon-info"></span> 共{{ total }}条记录</p>
      </div>
      <!-- 表格 -->
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="id" label="序号" width="120"> </el-table-column>
        <el-table-column prop="number" label="企业编号" width="120">
        </el-table-column>
        <el-table-column prop="shortName" label="企业简称" width="120">
        </el-table-column>
        <el-table-column prop="tags" label="标签" width="160">
        </el-table-column>
        <el-table-column prop="username" label="创建者" width="120">
        </el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="120">
        </el-table-column>
        <el-table-column prop="remarks" label="备注" width="120">
        </el-table-column>
        <el-table-column prop="state" label="状态" width="120">
        </el-table-column>
        <el-table-column prop="operation" label="操作" width="160">
           <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle @click="editInfo(scope.row.id)"></el-button
          ><el-button type="success" icon="el-icon-check" circle></el-button
          ><el-button type="danger" icon="el-icon-delete" circle @click="open(scope.row.id)"></el-button>
          </template>

        </el-table-column>
      </el-table>

    </div>
    <companysAddVue ref="companysAddVue" :titleInfo="titleInfo" :formBase="formBase"></companysAddVue>
  </div>
</template>

<script>
import { list, remove } from '@/api/hmmm/companys.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import companysAddVue from '@/module-hmmm/components/companys-add'
export default {
  components: {
    companysAddVue
  },
  data () {
    return {
      input: '',
      tableData: [
        {
          id: '2',
          number: '2',
          abbreviation: '2',
          founder: '2',
          founddate: '2',
          remarks: '2',
          operation: '2'
        }
      ],
      total: 2,
      // 选择城市地区
      form: {
        tags: '',
        user: '',
        region: '',
        province: '',
        shortName: '',
        state: 0
      },
      province: [],
      city: [],
      dialogFormVisible: false,
      // 子组件
      titleInfo: {
        text: 'aa',
        pageTitle: 'aa'
      },
      formBase: {
        id: null,
        city: '',
        company: '',
        isFamous: false,
        province: '',
        remarks: '',
        shortName: '',
        tags: ''
      }
    }
  },

  async created () {
    await this.renderList()
    this.province = provinces()
  },

  methods: {
    async renderList () {
      const { data } = await list()
      this.total = data.counts
      this.tableData = data.items
    },
    selectCity () {
      this.city = citys(this.form.province)
    },
    onSubmit () {
      console.log('submit!')
    },
    addUser () {
      console.log('addUser')
      this.$refs.companysAddVue.dialogFormVisible = true
    },
    clearselect () {
      this.form.user = ''
      this.form.region = ''
      this.form.province = ''
      this.form.shortName = ''
      this.form.state = ''
      this.form.tags = ''
    },
    editInfo (id) {
      this.$refs.companysAddVue.dialogFormVisible = true
      this.formBase.id = id
    },
    open (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.form.id = id
        remove(this.form)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.renderList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped lang="less">
.all {
  padding: 20px;
  .main {
    padding: 20px;
    background-color: #fff;
  }
  .separate {
    margin: 20px 0;
    width: 100%;
    height: 30px;
    background-color: #ccc;
    padding-left: 15px;
    border-radius: 5px;
    p {
      font-size: 18px;
      line-height: 30px;
    }
  }
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
